<template>
  <div class="top">
    <div class="top1">
      <ul>
        <li><img src="../assets/images/logo.png"/></li>
        <li>
          <input class="shopp" placeholder="商品名称"/>
          <img class="suo" src="../assets/images/search.png"/>
        </li>
        <li>
          <img class="che" src="../assets/images/car.png"/>
          <input type="text" @click="$router.push('/cart')" class="cars" placeholder="购物车">
        </li>
        <li>
          <img class="tels" src="../assets/images/tel.png"/>
          <span class="math">400-632-5588</span>
        </li>
      </ul>
    </div>
    <div class="top2">
      <ul>
        <li><router-link to="/" exact>首页</router-link></li>
        <li><router-link to="/shopp">商品</router-link></li>
        <li><router-link to="/order">订单</router-link></li>
        <li><router-link to="/sort">全部商品分类<img class="shopping" src="../assets/images/shopp.png"/>

        </router-link></li>
        <li><img class="mens" src="../assets/images/men.png"/>您好，<router-link to="/login">请登录</router-link></li>
      </ul>
    </div>
    <!-- <div class="footer">
      <ul>
        <li><router-link to="/" >关于我们</router-link></li>
        <li><router-link to="/shopp">联系我们</router-link></li>
        <li><router-link to="/order">会员介绍</router-link></li>
        <li><router-link to="/order">购物指南</router-link></li>
        <li><router-link to="/order">常见问题</router-link></li>
      </ul>
    </div> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style scoped lang="less">
*{
  margin:0;
  padding:0
}
.top{
  z-index: 9999;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:1.58rem;
  background: white;
  font-size: .22rem;
  .top1{
    width:100%;
    height:.75rem;
    li{
      width:24.9%;
      height:.75rem;
      line-height: .75rem;
      list-style: none;
      float:left;
      border:1px solid lightgray;
      border-left:none;
      img{
        position: relative;
        top:.13rem;
        left:11%;
        line-height: .75rem;
      }
      .suo{
        width:.25rem;
        height:.25rem;
        position: relative;
        left:-.4rem;
        top:.08rem;
        cursor: pointer;
      }
      .shopp{
        width:60%;
        height:.4rem;
        padding:0 .2rem;
        outline: 0;
        border-radius: .1rem;
        font-size: .2rem;
        border:1px solid lightgray;

      }
      .che{
        width:.25rem;
        height:.25rem;
        position: relative;
        left:20%;
        top:.07rem;
      }
      .cars{
        width:45%;
        height:.4rem;
        text-align: right;
        padding:0 .3rem 0 0;
        outline: 0;
        border-radius: .1rem;
        font-size: .2rem;
        border:1px solid lightgray;
      }
      .tels{
        width:.35rem;
        height:.35rem;
        position: relative;
        left:-.15rem;
        top:.09rem;
      }
      .math{
        font-size: .25rem;
        font-weight: 600
      }
    }
    li:nth-child(4){
      border-right:none
    }
  }
  .top2{
    width:100%;
    height:.8rem;
    .mens{
      width:.25rem;
      height:.26rem;
      position: relative;
      top:.06rem;
      left:-.2rem;
    }
    .shopping{
      width:.2rem;
      height:.2rem;
      position: relative;
      left:.15rem;
      top:.04rem;

    }
    li{
      width:20%;
      height:.8rem;
      line-height: .8rem;
      float:left;
      list-style: none;
      border-bottom:1px solid lightgray
    }
    a{
      display:inline-block;
      text-decoration: none;
      // color: #6e769a;
      color:rgb(110, 118, 154)
    }
    a.router-link-active{
      color:rgb(107, 36, 102);
    }
  }
  // .footer{
  //   width:100%;
  //   height:.8rem;
  //   background: green;
  //   border-top:1px solid lightgray;
  //   li{
  //     width:20%;
  //     height:.8rem;
  //     line-height: .8rem;
  //     float:left;
  //     list-style: none;
  //     a{
  //       text-decoration: none
  //     }
  //   }
  // }
}

</style>
